<template>

  <div>
    <el-tabs
      v-model="value"
    >
      <slot name="item" />
    </el-tabs>
    <el-button @click="nextStep">下一步</el-button>
  </div>
</template>

<script>
import {inject,onMounted} from "vue";

export default {
  name: 'Tabs',
  props: {

    title: {
      type: String,
      default: 'Tabs22'
    },
    fields: {
      type: Array,
      default: () => []
    }

  },
  data() {
    return {
      activeName: 'd',
      value: 'f',
      showHeader: true
    }
  },
  setup(props){
    const groupForm = inject('groupForm', {});
    const form = inject('form');
    const nextStep = () => {
      console.log('----------nextStep',props.fields)
      let res = form.validateForm((res) => {
        console.log('-------back',res)
      },props.fields)
      console.log('------2----')
    }
    return {
      nextStep
    }
  }
}

</script>

<style scoped >
    .box-card{
        margin-bottom: 20px;
    }
</style>
